<template>
    <tableCom :tableData="tableData" :columns="columns"  :tableLoading="tableLoading"  align="center">
        <!-- 头像显示 -->
        <template v-slot:imageUrl="{row}">
            <img :src="row.imageUrl" width="100">

        </template>
        
        <template v-slot:action="{row}">
                <!-- 自定义图标 -->
                <el-button type="success" > 
                    <template #icon>
                        <i class="iconfont icon-vip3"></i>
                    </template>
                    <template #default>
                        点击充值

                    </template>
                </el-button>
            </template>
    </tableCom>
</template>
<script setup>
import tableCom from "@/components/tableCom/index.vue"
// 引入发送请求的方法
import * as api from "@/api/pay.js"
import {ref} from "vue"

// 动态定义表头
let columns=[
    {
        label:"产品图片",
        prop:"imageUrl"
    },
    {
        label:"产品名称",
        prop:"productName"
    },
    {
        label:"产品描述",
        prop:"description"
    },
    {
        label:"产品价格",
        prop:"price"
    }, 
    {
        label:"库存", 
        prop:"inventory"
    },
    {
        label:"充值",
        prop:"action"
    }
]

// 声明一个数据，用于注入给表格
let tableData=ref([])
// 声明控制加载动画的变量
let tableLoading=ref(false)

// 获取产品
let getList=async()=>{
    tableLoading.value=true
    try{
        let res=await api.getCategoryApi()
        // console.log(res)
        tableData.value=res.data.data.reverse()
        tableLoading.value=false

    }catch(e){
        console.log(e)
        tableLoading.value=false
    }
}
getList()

</script>
<script>
export default {
    meta: {
        name: "vip充值",
        title: "vipCharge",
        routeName: "Charge",
        icon: "icon-chongzhi"
    }
}


</script>


